<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"> api分水岭
		<title>v-show</title>
		<script src="js/vue.js"></script>
	</head>
	<body>
		<div id="app">
		<p v-show="age>=18">	
			成年
		</p>
		<p v-show="age<18">	
			未成年
		</p>
		<p v-if="age>=18">成年</p>
		<p v-if="age<18">未成年</p>
		<hr >
		<p v-if="salary<=10">普通阶层</p>
		<p v-else-if="salary<=500">中产阶层</p>
		<p v-else="salary>=500">富豪阶层</p>
		<p v-for="o in hobby">{{o}}</p>
		<p v-for="o,i in hobby">{{o}}-{{i}}</p>
		<hr >
		<button v-on:click="show">点我</button>
		<button v-on:click="show()">点我</button>
		<button @click="show()">点我</button>
		<hr >
	     <a v-bind: href="site.url"></a> 
		<p v-html="sysname"></p>
         <br>
		 
		</div>
		
	</body>
	<script>
		new Vue({
			el:"#app",
			data:{
				sysname:"<b>京淘</b>电商平台",
			   age:18,
			   salary:90,
			   hobby:["乒乓球","爬山","唱歌"],
			   site:{
				   name:"java培优官网",
				   url:"http://act.codeboy.com"
			   }
			},
			methods:{
				show:function(){
					console.log("show method");
				}
			}
		});
	</script>
</html>

